<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title></title>
	<link rel="stylesheet" href="component/elementUI/index.css">
	<link rel="stylesheet" href="admin/css/other/login.css" />
	<style>
		/* 给id为app的外层容器添加样式 */
		#app {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
		}

		/* 隐藏滚动条 */
		body {
			overflow: hidden;
		}

		.shadow {
			border-color: #252020;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
		}

		.el-tabs__header {
			margin-bottom: 25px !important;
		}

		.layui-form-item {
			margin: 0 !important;
		}
	</style>
</head>
<!-- 代 码 结 构 -->

<body style="background-size: cover;">
	<div id="app" v-cloak>
		<div class="container">
			<form class="layui-form" action="javascript:void(0);">
				<div class="layui-form-item">
					<div style="display: flex;align-items: center;justify-content: center">
						<span style="font-weight: 700;font-size:2em ;">数智漠河</span>
					</div>
					<div class="text">欢迎登录</div>
				</div>
				<div class="shadow" style="padding: 6%;margin-top: 3%;">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="账号登录" name="first"></el-tab-pane>
						<!-- <el-tab-pane label="验证码登录" name="second"></el-tab-pane> -->
					</el-tabs>
					<!-- 手机号 -->
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
						<el-form-item prop="User_Number">
							<el-input v-model="ruleForm.User_Number" placeholder="请输入您注册时填写的手机号"></el-input>
						</el-form-item>
						<!-- 密码 -->
						<el-form-item prop="Pass_Word" v-if="activeName =='first'">
							<el-input v-model="ruleForm.Pass_Word" placeholder="请输入您注册时填写的密码" show-password></el-input>
						</el-form-item>
						<!-- 验证码 -->
						<!-- <el-form-item prop="Word" v-if="activeName =='second'" >
						<div style="display: flex;justify-content: center;">
							<el-input v-model="ruleForm.Word" placeholder="请输入手机收到的验证码"
								style="margin-right: 15px;"></el-input>
							<el-button type="primary" plain :disabled="isCounting ||!ruleForm.User_Number" @click="getyzm">
								{{ countdown > 0 ? countdown + 's后重新获取' : '获取验证码' }}
							</el-button>
						</div>
					</el-form-item> -->
					</el-form>
					<!-- 记住密码 -->
					<el-checkbox v-model="checked" @change="handleChange">记住密码</el-checkbox>
					<!-- 登 录 -->
					<div style="margin-top: 10px;">
						<el-button class="my-button" @click="handleLogin('ruleForm')" type="primary">登 录</el-button>
					</div>
				</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script type="text/javascript" src="component/layui/layui.js"></script>
	<script type="text/javascript" src="component/pear/pear.js"></script>
	<script type="text/javascript" src="utils/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="utils/jquery.cookie.js"></script>
	<script type="text/javascript" src="api/request.js"></script>
	<script type="text/javascript" src="config/config.js"></script>
	<script type="text/javascript" src="utils/crypto-js.min.js"></script>
	<script type="text/javascript" src="utils/vue.min.js"></script>
	<script type="text/javascript" src="component/elementUI/index.js"></script>
	<script type="text/javascript" src="utils/utils.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					checked: true,
					ruleForm: {
						Word: "",
						User_Number: '',
						Pass_Word: '',
						// url: 'index.html',
					},
					rules: {
						User_Number: [
							{ required: true, message: '请输入手机号', trigger: 'blur' },
						],
						Pass_Word: [
							{ required: true, message: '请输入密码', trigger: 'blur' }
						],
						Word: [
							{ required: true, message: '请输入验证码', trigger: 'blur' }
						],
					},
					formData: {},
					activeName: 'first',
					countdown: 0, // 倒计时的秒数
					isCounting: false, // 用于标记是否正在倒计时
					loading: false,
				}
			},
			mounted() {
				this.ruleForm.User_Number = localStorage.getItem("User_Number")
				this.ruleForm.Pass_Word = localStorage.getItem("Pass_Word")
				if (sessionStorage.getItem("REDIRECT")) {
					this.$notify.error({
						title: '登录过期,请重新登录！',
						message: sessionStorage.getItem("REDIRECT")
					});
					sessionStorage.removeItem("REDIRECT");
				}
			},
			methods: {
				// 验证码方法
				getyzm() {
					if (this.isCounting) return; // 如果正在倒计时，直接返回
					// this.countdown = 60
					this.isCounting = true;
					this.countdown = 60; // 初始化倒计时为 60 秒
					const timer = setInterval(() => {
						this.countdown--;
						if (this.countdown <= 0) {
							clearInterval(timer);
							this.isCounting = false;
						}
					}, 1000);
					console.log(this.ruleForm.User_Number);
					$.ajax({
						header: {
							'content-type': 'application/x-www-form-urlencoded', //会将数据转换为query string
						},
						url: 'https://service.kdddy.cn/donghui/login/getVerificationCode',
						type: 'GET',
						data: {
							Telephone: this.ruleForm.User_Number
						},
						success: (res) => {
							console.log(res);
						},
						fail: (err) => {
							console.error(err);
						}
					});
				},
				//记住密码
				handleChange() {
					console.log('记住密码状态变更:', this.checked)
				},
				handleClick() {
					console.log(this.activeName);
				},
				//登录方法
				handleLogin(ruleForm) {
					this.$refs[ruleForm].validate((valid) => {
						if (this.checked) {
							localStorage.setItem("User_Number", this.ruleForm.User_Number)
							localStorage.setItem("Pass_Word", this.ruleForm.Pass_Word)
						} else {
							localStorage.removeItem("User_Number")
							localStorage.removeItem("Pass_Word")
						}
						const _this = this
						//获取token
						$.ajax({
							url: `${mh}/login/userLogin`,
							type: 'POST',
							data: {
								UserName: this.ruleForm.User_Number,
								// Password: md5Encrypt( this.ruleForm.Pass_Word).toUpperCase()
								Password: mh.includes('szmhservice.essp.top') ?  md5Encrypt( this.ruleForm.Pass_Word).toUpperCase(): this.ruleForm.Pass_Word
							},
							success: function (arg_Result) {
								console.log(arg_Result);
								// if (arg_Result == "success") {
								// 	window.location.href = "./index.html";
								// } else {
								// 	_this.$message.error('请检查账号或密码是否有误！');
								// }
							},
							complete: (XMLHttpRequest)=> {
								requestPretreatment(XMLHttpRequest, this.ruleForm.User_Number, (Status) => {
									if (Status == "error") {
										this.$notify.error({
											title: '登录失败',
											message: '账号或密码错误！'
										});
									}
								});
								// $.cookie('accesstoken', XMLHttpRequest.getResponseHeader("accesstoken"));
								// console.log($.cookie("accesstoken"));
								// _this.$message.error('请检查账号或密码是否有误！');
							},
						})
					})
				},
			}
		})
	</script>
</body>

</html>